<template>
  <div class="third_wrap">
    <div class="graph_wrap">
      <div class="graph_left">
        <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
      </div>
      <div class="grath_right">
        <div id="Chart" :style="{width: '95%', height: '95%'}"></div>
      </div>
    </div>
  </div>
</template>

<script>
// let echarts = require('echarts');
import * as echarts from 'echarts'
export default {
  name: 'HelloWorld',
  data () {
    return {
      labData: null,
      timeArr: []
    }
  },
  created () {
    console.log(this.$route.query.routeParams)
  },
  mounted () {
    this.labData = this.$route.query.routeParams['Waveform Out'][0]['Waveform Value'].Y;
    let startTime = 0;
    for (var i = 0; i < this.labData.length; i++) {
      this.timeArr.push(startTime.toFixed(2));
      startTime += 1/100;
    }
    // 绘制电压图
    this.drawVoltageLine(this.$route.query.routeParams['Waveform Out'][0]['Waveform Name'],this.timeArr,this.labData);
    // 绘制角度图
    let angleObj = {
      dom: 'Chart',
      graphTitle: 'Angle/Energy(deg/mJ)',
      time: this.timeArr,
      graphData: [
        {
          lineName: this.$route.query.routeParams['Waveform Out'][1]['Waveform Name'],
          data: this.$route.query.routeParams['Waveform Out'][1]['Waveform Value'].Y,
        },
        {
          lineName: this.$route.query.routeParams['Waveform Out'][2]['Waveform Name'],
          data: this.$route.query.routeParams['Waveform Out'][2]['Waveform Value'].Y,
        }
      ]
    }
    this.drawAngleLine(angleObj);
  },
  methods: {
    drawVoltageLine(title,time1,data1){
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      var data = [],
          time = [];
      for (var i = 0; i < 50; i++) {
          data.push(data1[i]);
          time.push(time1[i]);
      }
      let option = {
          title: {
                text: "Voltage(V)"
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  animation: false
              }
          },
          legend: {
              data:[title]
          },
          xAxis: {
                name: '时间',
                nameLocation: 'center',
                nameGap: 23,
                type: 'category',
                boundaryGap: false,
                data: time
          },
          yAxis: {
                name: '幅度',
                type: 'value'
          },
          series: [{
              name: title,
              type: 'line',
              showSymbol: false,
              hoverAnimation: false,
              data: data
          }]
      };
      myChart.setOption(option);
      let startNum =49;
      let timer = setInterval(function () {
                for (var i = 0; i < 1; i++) {
                    startNum++;
                    data.shift();
                    data.push(data1[startNum]);
                    time.shift();
                    time.push(time1[startNum]);
                }

                myChart.setOption({
                    xAxis: {
                        data: time
                    },
                    series: [{
                        data: data
                    }]
                });
                if(startNum == data1.length-1) clearInterval(timer);
            }, 1000);
    },
    drawVoltageLine1(title,data,time){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {
                text: "Voltage(V)"
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[title]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '4%',
                containLabel: true
            },
            toolbox: {
                show: false,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                name: '时间',
                nameLocation: 'center',
                nameGap: 23,
                type: 'category',
                boundaryGap: false,
                data: time
            },
            yAxis: {
                name: '幅度',
                type: 'value'
            },
            series: [
                {
                    name:title,
                    type:'line',
                    stack: '总量',
                    data:data
                }
            ]
        });
    },
    drawAngleLine(angleObj){
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(angleObj.dom))
      // 绘制图表
      var pAngle = [],
          aAngle = [],
          time = [];
      for (var i = 0; i < 50; i++) {
          pAngle.push(angleObj.graphData[0].data[i]);
          aAngle.push(angleObj.graphData[1].data[i]);
          time.push(angleObj.time[i]);
      }
      let option = {
          title: {
                text: "Voltage(V)"
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  animation: false
              }
          },
          legend: {
              data:[angleObj.graphData[0].lineName,angleObj.graphData[1].lineName]
          },
          xAxis: {
                name: '时间',
                nameLocation: 'center',
                nameGap: 23,
                type: 'category',
                boundaryGap: false,
                data: time
          },
          yAxis: {
                name: '幅度',
                type: 'value'
          },
          series: [{
                    name:angleObj.graphData[0].lineName,
                    type:'line',
                    stack: '总量',
                    data: pAngle
                },
                {
                    name:angleObj.graphData[1].lineName,
                    type:'line',
                    stack: '总量',
                    data: aAngle
                }]
      };
      myChart.setOption(option);
      let startNum =49;
      let timer = setInterval(function () {
                for (var i = 0; i < 1; i++) {
                    startNum++;
                    pAngle.shift();
                    pAngle.push(angleObj.graphData[0].data[startNum]);
                    aAngle.shift();
                    aAngle.push(angleObj.graphData[1].data[startNum]);
                    time.shift();
                    time.push(angleObj.time[startNum]);
                }

                myChart.setOption({
                    xAxis: {
                        data: time
                    },
                    series: [{
                        data: pAngle
                    },{
                        data: aAngle
                    }]
                });
                if(startNum == angleObj.graphData[0].data.length-1) clearInterval(timer);
            }, 1000);
    },
    drawAngleLine1(angleObj){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(angleObj.dom))
        // 绘制图表
        myChart.setOption({
            title: {
                text: angleObj.graphTitle
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                right: 30,
                data:[angleObj.graphData[0].lineName,angleObj.graphData[1].lineName]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: angleObj.time
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:angleObj.graphData[0].lineName,
                    type:'line',
                    stack: '总量',
                    data:angleObj.graphData[0].data
                },
                {
                    name:angleObj.graphData[1].lineName,
                    type:'line',
                    stack: '总量',
                    data:angleObj.graphData[1].data
                }
            ]
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .third_wrap{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: url(//storage.xuetangx.com/public_assets/xuetangx/images/third_bg.png) no-repeat;
    background-size: 100% 100%;
    .graph_wrap{
      position: absolute;
      top: 32%;
      left: 10%;
      width: 85%;
      height: 55%;
      .grath_right,.graph_left{
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        float: left;
        padding: 2%;
      }
    }
  }
</style>
